<!-- 健康测评问卷 -->
<template>
<div class="container">
    <div class="close" @click="exit">
        <van-icon name="cross" size="30" color="#888" />
        <span style="float: right;font-size: 0.9375rem;color: #999;">{{ curIndex+1+'/'+quesList.length }}</span>
    </div>
    <div class="main">
        <!-- 题目 -->
        <div style="font-size: 1.125rem;margin-bottom:1.875rem;">{{ quesText }}</div>
        <!-- 单选选项 -->
        <div v-show="showRaio">
            <van-radio-group v-model="choosedAnswer">
                <van-radio v-for="(item,index) in ansArr" :name="index+1" :key="index+1" checked-color="#69b129" @click="shooseOne">{{ item }}</van-radio>
            </van-radio-group>
        </div>
        <!-- 多选选项 -->
        <div v-show="!showRaio">
            <van-checkbox-group v-model="choosedAnswerArr">
                <van-checkbox shape="square" v-for="(item,index) in ansArr" :name="ansIdArr[index]" :key="ansIdArr[index]" checked-color="#69b129">{{ item }}</van-checkbox>
            </van-checkbox-group>
        </div>
    </div>
    <!-- 按钮 -->
    <div class="btn">
        <van-button v-show="curIndex>0" block round plain hairline color="#639339" @click="prevQues">上一题</van-button>
        <van-button v-show="showNextBtn" block round plain hairline color="#639339" @click="nextQues">下一题</van-button>
        <van-button v-show="showSmtBtn" block round hairline color="#639339" @click="submit">提交</van-button>
    </div>

</div>
</template>

<script>
import {
    apiRequest
} from '../../assets/js/axios_api';
export default {
    metaInfo() {
        return {
            title: '健康测评问卷'
        }
    },
    name: 'Evaluate',
    data() {
        return {
            userInfo: {},
            showNextBtn: false, //下一题按钮是否展示
            showSmtBtn: false, //提交按钮是否展示
            quesList: [], //问卷
            curIndex: 0, //当前题目索引值
            showRaio: true, //是否是单选题，true单选题，false多选题
            quesText: '', //页面中展示的题目
            ansArr: [], //页面中要展示的选项文字
            ansIdArr: [], //多选题的ID
            choosedAnswer: '0', //存放当前单选题选中的选项
            choosedAnswerArr: [], //存放当前多选题题目所选中的选项
            answerData: [], //要提交的问卷答案
        }
    },
    components: {

    },
    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.getIllness();
        this.initQuestion();
        this.showCurQues();

    },
    methods: {
        // 调接口查询疾病，最后一题的选项
        getIllness() {
            apiRequest(this, 'illness/page', {
                limit: 100,
                page: 1
            }, resData => {
                // 返回成功要做的事
                resData.list.forEach(element => {
                    this.quesList[this.quesList.length - 1].answers.push(element.illnessName)
                    this.quesList[this.quesList.length - 1].vals.push(element.id)
                });
            }, 'get')
        },
        // 点击单选选项时，将选择的答案赋值，并自动下一题
        shooseOne() {
            this.formAnswerData();
            if (this.curIndex < this.quesList.length) {
                this.nextQues();
            }
        },
        // 点击复选框，判断是否显示下一题或提交按钮
        // checkOne() {
        //     if (this.choosedAnswerArr.length > 0) {
        //         if (this.curIndex < this.quesList.length) {
        //             this.showNextBtn = true;
        //         } else {
        //             this.showSmtBtn = true;
        //         }
        //     }
        // },
        // 点击上一题
        prevQues() {
            // 多选题，点击上一题时给答案赋值
            if (!this.showRaio) {
                this.formAnswerData();
            }
            if (this.curIndex > 0) {
                this.curIndex--;
                this.showCurQues();
            }
        },
        // 点击下一题
        nextQues() {
            // 多选题，点击下一题时给答案赋值
            if (!this.showRaio) {
                this.formAnswerData();
            }
            this.curIndex++;
            this.showCurQues();
        },
        // 点击提交
        submit() {
            // 将最后一题答案数据格式化
            this.formAnswerData();
            let param = {
                cusId: this.userInfo.cusId,
                questionList: this.answerData
            }
            apiRequest(this, 'hmquestionnaire', param, resData => {
                // 返回成功要做的事
                sessionStorage.setItem('evaluateRes',JSON.stringify(resData))
                this.$router.push('/checkevaluation')
            }, 'post')
        },
        // 每道题目选完后，格式化答案数据，也就是给要提交的问卷答案赋值
        formAnswerData() {
            this.answerData[this.curIndex] = {
                serialNo: this.curIndex + 1
            }
            if (this.showRaio) {
                this.answerData[this.curIndex].answer = this.choosedAnswer
            } else {
                this.answerData[this.curIndex].answer = this.choosedAnswerArr.join(',')
            }
            // console.log(JSON.stringify(this.answerData))
        },
        // 展示当前题目内容
        showCurQues() {
            this.quesText = this.quesList[this.curIndex].ques;
            this.showRaio = this.quesList[this.curIndex].type === 'radio';
            this.ansArr = this.quesList[this.curIndex].answers;
            this.ansIdArr = this.quesList[this.curIndex].vals || [];
            //如果题目选过答案，则将之前选择的答案回显
            if (this.answerData[this.curIndex] && this.answerData[this.curIndex].answer) {
                if (this.showRaio) {
                    this.choosedAnswer = this.answerData[this.curIndex].answer;
                } else {
                    this.choosedAnswerArr = this.answerData[this.curIndex].answer.split(',').map(element => parseInt(element));
                }
            } else {
                this.choosedAnswer = '0'
                this.choosedAnswerArr = []
            }
            // 如果不是最后一题，且题目选择答案了，则展示下一题按钮
            if (this.curIndex < this.quesList.length - 1 && this.answerData[this.curIndex] && this.answerData[this.curIndex].answer) {
                this.showNextBtn = true;
            } else {
                this.showNextBtn = false;
            }
            // 倒数第二个多选题，需要显示下一题按钮，可以不选择选项
            if (this.curIndex == this.quesList.length - 2) {
                this.showNextBtn = true;
            }
            // 最后一个多选题，需要显示提交按钮，可以不选择选项
            if (this.curIndex == this.quesList.length - 1) {
                this.showSmtBtn = true;
            }
        },
        // 点击退出×
        exit() {
            this.$dialog.confirm({
                    message: '问卷还未填写完，题目不多，为了给您推荐更合理的饮食和运动，请您耐心填写完吧~',
                    confirmButtonText: '继续填写',
                    cancelButtonText: '确认退出',
                    confirmButtonColor: '#639339'
                }).then(() => {
                    // on confirm
                })
                .catch(() => {
                    // on cancel
                    this.$router.go(-1)
                });
        },
        // 定义问卷题目
        initQuestion() {
            this.quesList = [{
                    type: 'radio',
                    ques: '是否吸烟？',
                    answers: ['不吸烟', '已戒烟一年以上', '吸烟']
                },
                {
                    type: 'radio',
                    ques: '是否饮酒？(不同种类酒的摄入量可以参照相同或相近度数的酒)',
                    answers: ['不饮酒', '少量饮酒(每日啤酒不超过200ml，或葡萄酒不超过100ml，或黄酒不超过200ml)', '饮酒过量(每日啤酒超过200ml，或葡萄酒超过100ml，或黄酒超过200ml，或白酒任意量)']
                },
                {
                    type: 'radio',
                    ques: '在过去一个月，是否要服药才能入睡(包括医生开的处方和自购药物)？',
                    answers: ['几乎每天', '有时', '非常少或没有']
                },
                {
                    type: 'radio',
                    ques: '每周有几天吃早餐？',
                    answers: ['5天以上', '4-5天', '2-3天', '2天以下']
                },
                {
                    type: 'radio',
                    ques: '饮食习惯是？',
                    answers: ['荤素搭配', '素食', '其他']
                },
                {
                    type: 'radio',
                    ques: '平均每周有几天吃杂粮类食物(如玉米、高粱、燕麦、薯类) ？',
                    answers: ['3天以上', '1-2天', '不吃']
                },
                {
                    type: 'radio',
                    ques: '平均每周有几天吃新鲜蔬菜？',
                    answers: ['5天以上', '2-4天', '2天以下或不吃']
                },
                {
                    type: 'radio',
                    ques: '平均每周有几天吃水果？',
                    answers: ['5天以上', '2-4天', '2天以下或不吃']
                },
                {
                    type: 'radio',
                    ques: '平均每周有几天食用牛奶及奶制品或者豆类及豆制品？',
                    answers: ['5天以上', '3-4天', '1-2天', '不吃']
                },
                {
                    type: 'radio',
                    ques: '平均每周有几天吃油炸食品？',
                    answers: ['5天以上', '3-4天', '1-2天', '不吃']
                },
                {
                    type: 'radio',
                    ques: '平均每周有几天吃腌、熏类食物？',
                    answers: ['5天以上', '3-4天', '1-2天', '不吃']
                },
                {
                    type: 'radio',
                    ques: '每周有几次持续30分钟以上的中等强度身体活动(如快走、骑车、休闲游泳、拖地板、手洗衣物等)？',
                    answers: ['0次', '1-2次', '3-4次', '5次及以上']
                },
                {
                    type: 'radio',
                    ques: '未来半年内是否会提高运动频率？',
                    answers: ['是', '否']
                },
                {
                    type: 'radio',
                    ques: '每天大部分时间：',
                    answers: ['静坐为主', '轻度活动', '大量活动']
                },
                {
                    type: 'radio',
                    ques: '每天是否刷牙？',
                    answers: ['是', '否']
                },
                {
                    type: 'radio',
                    ques: '每天平均睡眠时间？',
                    answers: ['不足5小时', '5-7小时', '7-9小时', '超过9小时']
                },
                {
                    type: 'radio',
                    ques: '对生活感到：',
                    answers: ['很满意', '比较满意', '一般', '不太满意', '不满意']
                },
                {
                    type: 'radio',
                    ques: '与家人和朋友的关系：',
                    answers: ['亲切', '良好', '一般', '疏远', '不确定']
                },
                {
                    type: 'radio',
                    ques: '最近一年，是否有感受到较大的压力，从而引起紧张、焦虑或情绪低落？',
                    answers: ['经常', '有时', '偶尔', '很少', '从不']
                },
                {
                    type: 'radio',
                    ques: '最近一年，感觉压力对健康的影响程度：',
                    answers: ['大', '有点大', '一般', '有一点影响', '没影响']
                },
                {
                    type: 'radio',
                    ques: '与同龄人相比，整体的身体健康状况如何？',
                    answers: ['很好', '好', '一般', '不太好', '很差']
                },
                {
                    type: 'radio',
                    ques: '定期接受健康体检吗？',
                    answers: ['从没有', '定期检查']
                },
                {
                    type: 'radio',
                    ques: '腰围(cm)：',
                    answers: ['80-89cm(男性)，75-84cm(女性)', '<80cm(男性)，<75cm(女性)', '≥90cm(男性)，≥85cm(女性)']
                },
                {
                    type: 'radio',
                    ques: '收缩压mmHg(指血压的高值)：',
                    answers: ['<120', '120≤X<140', '140≤X<180', '≥180', '我不清楚具体数值，但我知道是正常范围', '我不清楚具体数值，但我知道不属于正常范围']
                },
                {
                    type: 'radio',
                    ques: '舒张压mmHg(指血压的低值)：',
                    answers: ['≤80', '80<X<90', '≥90', '我不清楚具体数值，但我知道是正常范围', '我不清楚具体数值，但我知道不属于正常范围']
                },
                {
                    type: 'radio',
                    ques: '总胆固醇指标：',
                    answers: ['我不清楚具体数值，但我知道是正常范围', '我不清楚具体数值，但我知道不属于正常范围']
                },
                {
                    type: 'radio',
                    ques: '空腹血糖指标：',
                    answers: ['我不清楚具体数值，但我知道是正常范围', '我不清楚具体数值，但我知道不属于正常范围']
                },
                {
                    type: 'checkbox',
                    ques: '您近两周是否有下列症状？(没有则不选)',
                    answers: ['口干或眼干', '皮肤干燥或起皮', '腹胀', '恶习呕吐', '腹泻', '便秘', '头晕', '头痛', '全身无力', '心悸', '咳嗽', '眼花', '耳鸣', '易怒', '过渡脱发', '食欲过强', '四肢麻木'],
                    vals: []
                },
                {
                    type: 'checkbox',
                    ques: '您是否患有或既往患有下列疾病？(没有则不选)',
                    answers: [],
                    vals: [],
                },
            ]
            let obj = this.quesList[this.quesList.length - 2]
            obj.answers.forEach((e, i) => {
                obj.vals.push(i + 1)
            });
        },

    }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/common.less';

.container {
    .close {
        padding: 1rem;
    }

    .main {
        padding: 1rem 1rem 8.125rem;
        font-size: 0.875rem;

        .van-radio {
            padding: 1.25rem 0.625rem;
            background-color: #fafaf8;
            border-radius: 1.875rem;
            margin-top: 0.625rem;
        }

        .van-checkbox {
            padding: 0.625rem 0;
        }
    }

    .btn {
        position: fixed;
        bottom: 0rem;
        left: 0rem;
        right: 0rem;
        background-color: #fff;
        padding: 0.625rem 1.25rem;

        button {
            margin: 0.625rem 0;
            height: 2.25rem;
        }
    }
}
</style>
